<template>
  <div class="mypagecon">
    <div class="left">
      <div class="userimgcon">
        <img class="userimg" :src="imgUrl+evaluateObj.user_head_img" alt="" >
        <span class="name">{{evaluateObj.user_nickname}}</span>
      </div>
      

      <div class="line">
        <span class="label">线路：</span><span>{{evaluateObj.commodity_name}}</span>
      </div>
      <div class="line">
        <span class="label">评价：</span>
        <el-rate
          style="display: inline-block;"
          disabled
          v-model="evaluateObj.evaluate_score"
          :colors="colors">
        </el-rate>
      </div>
      <div class="line">
        <span class="label">日期：</span><span>{{evaluateObj.init_time*1 | formatDate('yyyy-MM-dd hh:mm:ss')}}</span>
      </div>
    </div>
    <div class="right">
      <div class="h">
        <i class="iconfont icon-liulan"></i>
        <span>阅读 {{evaluateObj.view_count}}</span>
      </div>
      <div class="b">
        <div class="mb16">{{evaluateObj.evaluate_content}}</div>
        <div class="imgcon">
          <el-image 
            v-for="(item, index) in imgList"
            :key="index"
            style="width: 100px; height: 100px"
            :src="item" 
            :preview-src-list="imgList">
          </el-image>
        </div>
      </div>
    </div>
  </div>  
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import config from "api/config";
export default {
  computed: {
    ...mapState('middleData', ['evaluateObj']),
  },
  data(){
    return {
      imgUrl: config.imgUrl,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      imgList: []
    }
  },
  methods: {
    ...mapMutations('middleData', ['setEvaluateObj']),
  },
  created() {
    if(!Object.keys(this.evaluateObj).length) {
      this.$router.push('/home/lineEvaluate')
      this.imgList = this.evaluateObj.evaluate_image.split(',').map(item => this.imgUrl+item)
    }
  },
  beforeDestroy() {
    this.setEvaluateObj({})
  },
}
</script>

<style lang="scss" scoped>
.mypagecon{
  display: flex;
  color: #999;
  .userimg{
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin-bottom: 20px;
  }
  .line{
    line-height: 25px;
    .label{
      font-weight: bold;
    }
  }
  .left{
    background: rgba(252, 252, 252, 1);
    padding: 50px 40px;
    width: 300px;
    border: 1px solid #ccc;
  }
  .right{
    padding: 30px;
    flex: 1;
    .h{
      line-height: 53px;
      border-bottom: 1px solid #ccc;
    }
    .b{
      padding: 30px 0;
    }
  }
}
.userimgcon{
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
</style>